/* eslint-disable vue/valid-v-bind */
/* eslint-disable vue/valid-v-bind */
<template>
  <div class="cot">
      <header-nav></header-nav>
      <div>
        <router-link to='/'>首页</router-link>
        /
        <span :style="{color:'#97a8be'}">{{flag}}</span>
      </div>
      <hr>
      <transition name="fade" mode="out-in">
        <router-view></router-view>
      </transition>
  </div>
</template>

<script>
// import Header from '@/components/header'

const flags = {
  projects: '我的项目',
  workbench: '工作台',
  doc: '文档'
}

export default {
  data () {
    return {
      flag: ''
    }
  },
  components: {
    headerNav: (resolve) => {
      setTimeout(() => {
        resolve(require('@/components/header'))
      }, 1000)
    }
  },
  watch: {
    $route () {
      this.flag = flags[this.$route.path.slice(1)]
    }
  },
  beforeRouteEnter (to, from, next) {
    // ...
    next((vm) => {
      vm.flag = flags[to.path.slice(1)]
    })
  }
}
</script>

<style>
.cot {
  cursor: pointer;
}
</style>
